<template>
  <div class="received-stat">
    <el-radio-group v-model="type" size="small" class="received-radio" @change="initEcharts">
      <el-radio-button label="年">年</el-radio-button>
      <el-radio-button label="月">月</el-radio-button>
      <el-radio-button label="日">日</el-radio-button>
    </el-radio-group>
    <div id="received_stat_echarts" style="height: 100%;"></div>
  </div>
</template>
<script>
    import API from "@/api/index.api";
    export default {
        components: {},
        data () {
          return {
            type: '年',
            num: 20 ,
            myChart: null,
          }
        },
        methods: {
          async initEcharts () {
            const isScreen1920 = window.innerWidth <= 1920
            let res = await API.getCaseType({type: this.type})
            let data = res.content

            let echarts = this.$echarts;
            const CubeLeft = echarts.graphic.extendShape({
              shape: {
                x: 0,
                y: 0
              },
              buildPath: function(ctx, shape) {
                const xAxisPoint = shape.xAxisPoint
                const c0 = [shape.x, shape.y]
                const c1 = [shape.x - 9, shape.y - 9]
                const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]
                const c3 = [xAxisPoint[0], xAxisPoint[1]]
                ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
              }
            })
            const CubeRight = echarts.graphic.extendShape({
              shape: {
                x: 0,
                y: 0
              },
              buildPath: function(ctx, shape) {
                const xAxisPoint = shape.xAxisPoint
                const c1 = [shape.x, shape.y]
                const c2 = [xAxisPoint[0], xAxisPoint[1]]
                const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
                const c4 = [shape.x + 18, shape.y - 9]
                ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
              }
            })
            const CubeTop = echarts.graphic.extendShape({
              shape: {
                x: 0,
                y: 0
              },
              buildPath: function(ctx, shape) {
                const c1 = [shape.x, shape.y]
                const c2 = [shape.x + 18, shape.y - 9]
                const c3 = [shape.x + 9, shape.y - 18]
                const c4 = [shape.x - 9, shape.y - 9]
                ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
              }
            })
            echarts.graphic.registerShape('CubeLeft', CubeLeft)
            echarts.graphic.registerShape('CubeRight', CubeRight)
            echarts.graphic.registerShape('CubeTop', CubeTop)

            // 处理后台数据
            const caseTypes = data.map(item => item.case_type);
            const counts = data.map(item => item.count);
            const maxCount = Math.max(...counts); // 计算最大值并留出20%空间

            const option = {
              // backgroundColor: "#010d3a",
              title: {
                text: '接报类型统计',
                top: 10,
                left: 5,
                textStyle: {
                  color: '#00F6FF',
                  fontSize: isScreen1920 ? 18 : 40
                }
              },
              grid: {
                left: 60,
                right: 10,
                bottom: 220,
                top: 130,
                // containLabel: true
              },
              xAxis: {
                type: 'category',
                data: caseTypes,
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: 'white'
                  }
                },
                offset: 0,
                axisTick: {
                  show: false,
                  length: 9,
                  alignWithLabel: true,
                  lineStyle: {
                    color: '#7DFFFD'
                  }
                },
                axisLabel: {
                  fontSize: isScreen1920 ? 10 : 30,
                  interval: 0, // 强制显示所有标签
                  rotate: 30, // 如果标签文字过长可以旋转30度
                  margin: 40
                }
              },
              yAxis: {
                type: 'value',
                min: 0,
                max: maxCount,
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: 'white'
                  }
                },
                splitLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  fontSize: isScreen1920 ? 10 : 30,
                },
                boundaryGap: ['20%', '20%']
              },
              dataZoom: [
                {
                  type: 'slider', // 滑动条型数据区域缩放组件
                  show: true,
                  xAxisIndex: 0, // 控制哪个x轴
                  start: 0, // 默认起始位置（百分比）
                  end: 50, // 默认结束位置（百分比）
                  height: 15, // 滚动条高度
                  bottom: 30, // 距离底部的距离
                  backgroundColor: 'rgba(47,69,84,0.3)', // 背景颜色
                  fillerColor: 'rgba(16,95,149,0.6)', // 选中区域填充颜色
                  borderColor: 'transparent', // 边框颜色
                  handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                  handleSize: '80%', // 手柄大小
                  handleStyle: {
                    color: '#fff',
                    shadowBlur: 3,
                    shadowColor: 'rgba(0, 0, 0, 0.6)',
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                  },
                  labelFormatter: '', // 隐藏label
                  brushSelect: false // 禁止刷选
                },
                {
                  type: 'inside', // 内置型数据区域缩放组件
                  xAxisIndex: 0,
                  zoomOnMouseWheel: false, // 关闭滚轮缩放
                  moveOnMouseMove: true, // 开启鼠标移动触发平移
                  moveOnMouseWheel: true // 开启滚轮平移
                }
              ],
              series: [
                {
                  type: 'custom',
                  renderItem: function(params, api) {
                    const location = api.coord([api.value(0), api.value(1)])
                    return {
                      type: 'group',
                      children: [
                        {
                          type: 'CubeLeft',
                          shape: {
                            api,
                            xValue: api.value(0),
                            yValue: api.value(1),
                            x: location[0],
                            y: location[1],
                            xAxisPoint: api.coord([api.value(0), 0])
                          },
                          style: {
                            fill: 'rgba(7,29,97,.6)'
                          }
                        },
                        {
                          type: 'CubeRight',
                          shape: {
                            api,
                            xValue: api.value(0),
                            yValue: api.value(1),
                            x: location[0],
                            y: location[1],
                            xAxisPoint: api.coord([api.value(0), 0])
                          },
                          style: {
                            fill: 'rgba(10,35,108,.7)'
                          }
                        },
                        {
                          type: 'CubeTop',
                          shape: {
                            api,
                            xValue: api.value(0),
                            yValue: api.value(1),
                            x: location[0],
                            y: location[1],
                            xAxisPoint: api.coord([api.value(0), 0])
                          },
                          style: {
                            fill: 'rgba(11,42,106,.8)'
                          }
                        }
                      ]
                    }
                  },
                  data: Array(caseTypes.length).fill(maxCount) // 使用最大值填充背景
                },
                {
                  type: 'custom',
                  renderItem: (params, api) => {
                    const location = api.coord([api.value(0), api.value(1)])
                    return {
                      type: 'group',
                      children: [
                        {
                          type: 'CubeLeft',
                          shape: {
                            api,
                            xValue: api.value(0),
                            yValue: api.value(1),
                            x: location[0],
                            y: location[1],
                            xAxisPoint: api.coord([api.value(0), 0])
                          },
                          style: {
                            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                              {
                                offset: 0,
                                color: '#3B80E2'
                              },
                              {
                                offset: 1,
                                color: '#49BEE5'
                              }
                            ])
                          }
                        },
                        {
                          type: 'CubeRight',
                          shape: {
                            api,
                            xValue: api.value(0),
                            yValue: api.value(1),
                            x: location[0],
                            y: location[1],
                            xAxisPoint: api.coord([api.value(0), 0])
                          },
                          style: {
                            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                              {
                                offset: 0,
                                color: '#3B80E2'
                              },
                              {
                                offset: 1,
                                color: '#49BEE5'
                              }
                            ])
                          }
                        },
                        {
                          type: 'CubeTop',
                          shape: {
                            api,
                            xValue: api.value(0),
                            yValue: api.value(1),
                            x: location[0],
                            y: location[1],
                            xAxisPoint: api.coord([api.value(0), 0])
                          },
                          style: {
                            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                              {
                                offset: 0,
                                color: '#3B80E2'
                              },
                              {
                                offset: 1,
                                color: '#49BEE5'
                              }
                            ])
                          }
                        }
                      ]
                    }
                  },
                  data: counts // 使用实际数据
                },
                {
                  type: 'bar',
                  label: {
                    normal: {
                      show: true,
                      position: 'top',
                      formatter: (params) => {
                        return counts[params.dataIndex];
                      },
                      fontSize: isScreen1920 ? 16 : 32,
                      color: '#fff',
                      offset: [4, -25]
                    }
                  },
                  itemStyle: {
                    color: 'transparent'
                  },
                  data: Array(caseTypes.length).fill(maxCount)
                }
              ]
            }
            if (this.myChart) {
              this.myChart.dispose()
            }
            this.myChart = this.$echarts.init(document.getElementById('received_stat_echarts'))
            this.myChart.setOption(option)
          }
        },
        mounted() {
          this.initEcharts()
        }
    }
</script>
<style lang="stylus" scoped>
  .received-stat{
    pointer-events: auto;
    height: 100%;
    position: relative;
    .received-radio {
      position: absolute;
      right: 10px;
      top: 10px;
      z-index: 1;
      /deep/ .el-radio-button__inner {
        background: transparent;
        color: white;
      }
    }
  }
  @media screen and (max-width: 1920px) {
      .num{
          font-size: 30px!important;

      }
  }
</style>
